<html>
<head>
	<script type="text/javascript">
		mxBasePath = '../../../javascript/src';
	</script>
	<script type="text/javascript" src="../../../javascript/src/js/mxClient.js"></script>
	<script type="text/javascript">
		function main()
		{
			var graph = new mxGraph(document.getElementById('graphContainer'));
			graph.setHtmlLabels(true);
			
			var parent = graph.getDefaultParent();
			var model = graph.getModel();
		    model.beginUpdate();
		    
		    //var html = '<div style="background:orange;border:1px solid black;width:100%;height:100%;"/>'
		    //var html = '<table style="background:orange;border:1px solid black;width:100%;height:100%;"><tr><td></td></tr></table>';
		    //var html = '<div style="background:orange;border:1px solid black;width:100%;height:100%;"></div>';
		    var html = '<div style="box-sizing:border-box;background:orange;border:1px solid black;width:100%;height:100%;"></div>';

		    var w = 20;
		    var h = 20;
		    var y = 20;

	        graph.insertVertex(parent, null, html, 20, y, w, h,
	        	'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=1;align=left;verticalAlign=top;');
	        graph.insertVertex(parent, null, html, 50, y, w, h,
	    		'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=2;align=left;verticalAlign=top;');
	        graph.insertVertex(parent, null, html, 80, y, w, h,
	 			'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=3;align=left;verticalAlign=top;');
	        graph.insertVertex(parent, null, html, 110, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=4;align=left;verticalAlign=top;');

	        var y = 50;
	        
	        graph.insertVertex(parent, null, html, 20, y, w, h,
		    	'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=1;align=center;verticalAlign=top;');
		    graph.insertVertex(parent, null, html, 50, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=2;align=center;verticalAlign=top;');
		    graph.insertVertex(parent, null, html, 80, y, w, h,
					'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=3;align=center;verticalAlign=top;');
		    graph.insertVertex(parent, null, html, 110, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=4;align=center;verticalAlign=top;');

	        var y = 80;
	        
	        graph.insertVertex(parent, null, html, 20, y, w, h,
		    	'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=1;align=center;verticalAlign=middle;');
		    graph.insertVertex(parent, null, html, 50, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=2;align=center;verticalAlign=middle;');
		    graph.insertVertex(parent, null, html, 80, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=3;align=center;verticalAlign=middle;');
		    graph.insertVertex(parent, null, html, 110, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=4;align=center;verticalAlign=middle;');

	        var y = 110;
	        
	        graph.insertVertex(parent, null, html, 20, y, w, h,
		    	'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=1;align=left;verticalAlign=middle;');
		    graph.insertVertex(parent, null, html, 50, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=2;align=right;verticalAlign=middle;');
		    graph.insertVertex(parent, null, html, 80, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=3;align=center;verticalAlign=top;');
		    graph.insertVertex(parent, null, html, 110, y, w, h,
				'text;html=1;fillColor=none;overflow=fill;rounded=0;strokeColor=red;strokeWidth=4;align=center;verticalAlign=bottom;');
		    model.endUpdate();
		};
	</script>
</head>
<body onload="main();">
	<div id="graphContainer" style="overflow:hidden;width:400px;height:300px;border:1px solid gray;cursor:default;">
	</div>
</body>
</html>
